<script lang="ts" setup>
  import { DFModal, useModal } from '@render/components/DFModal';
  import { DFForm, useForm } from '@/components/DFForm/index';
  import { t } from '@/i18n';
  import { storage } from '@/utils/Storage';

  interface Props {
    shiftList: any;
  }

  const props = withDefaults(defineProps<Props>(), {
    shiftList: () => [],
  });

  const emit = defineEmits(['setShiftDataFn', 'register']);

  const [modalRegister, { openModal, closeModal: closeModalFn, setSubLoading: setSubLoadingFn }] =
    useModal({}); // dialog配置方法

  const userList = ref([]);

  const shiftCode = ref(null);

  const [
    modalFormRegister,
    { validate: validateFn, getFieldsValue: getModalFormValFn, setFieldsValue },
  ] = useForm({
    gridProps: { cols: 1 as any },
    layout: 'horizontal',
    showActionButtonGroup: false,
    schemas: [
      {
        field: 'shiftCode',
        component: 'NSelect',
        label: 'reportWorkShiftName',
        defaultValue: null,
        componentProps: {
          clearable: true,
          options: computed(() =>
            props.shiftList.map((item) => ({ label: item.shiftName, value: item.shiftCode }))
          ),
          onUpdateValue: (val) => {
            if (shiftCode.value !== val) {
              shiftCode.value = val;

              if (val) {
                const obj = props.shiftList.find((item) => item.shiftCode === val);

                if (obj && obj.userList && obj.userList.length)
                  userList.value = obj.userList.map((item) => ({
                    label: item.nickName,
                    value: item.userId,
                  }));
              } else {
                userList.value = [];
              }

              setFieldsValue({ userList: [] });
            }
          },
        },
        rules: [{ required: true, message: t('common.formTipMsg.input'), trigger: ['change'] }],
      },
      {
        field: 'userList',
        component: 'NCheckbox',
        label: 'reportWorkUserName',
        defaultValue: [],
        componentProps: {
          clearable: true,
          options: userList,
        },
        rules: [
          {
            required: true,
            type: 'array',
            message: t('common.formTipMsg.input'),
            trigger: ['change'],
          },
        ],
      },
    ],
  }); // dialog表单配置方法

  async function okModalFn() {
    try {
      const isSubmit = await validateFn();

      if (!isSubmit) {
        const val = await getModalFormValFn();
        // modalSubmitFn();
        emit('setShiftDataFn', val, closeModalFn);
      }
    } catch (e) {
      console.log(e);

      setSubLoadingFn(false);
    }
  }

  function openModalFn() {
    const shiftData = storage.get('shiftData', null);

    // console.log(shiftList.value)

    openModal();

    if (shiftData) {
      const { shiftCode } = shiftData;

      const obj = props.shiftList.find((item) => item.shiftCode === shiftCode);

      if (obj && obj.userList && obj.userList.length)
        userList.value = obj.userList.map((item) => ({ label: item.nickName, value: item.userId }));

      nextTick(() => {
        setFieldsValue(shiftData);
      });
    }
  }

  defineExpose({
    openModalFn,
  });
</script>

<template>
  <DFModal
    ref="dfModalRef"
    :title="$t('productionCenter.table.chooseReportWorker')"
    @register="modalRegister"
    @on-ok="okModalFn"
  >
    <DFForm route-name="productionCenter" get-label-form="table" @register="modalFormRegister" />
  </DFModal>
</template>

<style lang="less" scoped></style>
